<template>
  <div class="today-containner">
    <div class="outMore">
      <div class="dataTitle">
        今日数据
        <div class="titleRight" @click="returnIndex"><i class="el-icon-arrow-left titleIcon"></i> 返回</div>
      </div>
    </div>
    <el-row>
      <el-col :span="8" class="leftCol"><div class="dataContent">
        <div class="leftChild leftTop">
          <div class="dataView">
            <div class="viewTitle">设备健康状况</div>
            <aside>
              <figure>
                <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                   width="100%" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
                  <g id="content">
                    <g>
                      <g>
                        <g>
                          <path fill="#F0F2F7" d="M268.874,142c0-70.072-56.8-126.875-126.875-126.875C71.936,15.125,15.124,71.928,15.124,142H268.874z"
                            />
                        </g>
                        <line fill="none" x1="141.997" y1="23" x2="141.997" y2="15.127"/>
                        <line fill="none" x1="105.224" y1="28.825" x2="102.791" y2="21.339"/>
                        <line fill="none" x1="72.049" y1="45.729" x2="67.424" y2="39.358"/>
                        <line fill="none" x1="45.727" y1="72.056" x2="39.356" y2="67.427"/>
                        <line fill="none" x1="28.823" y1="105.229" x2="21.338" y2="102.796"/>
                        <line fill="none" x1="22.999" y1="142.002" x2="15.126" y2="142.002"/>
                        <line fill="none" x1="260.998" y1="141.998" x2="268.872" y2="141.998"/>
                        <line fill="none" x1="255.173" y1="105.226" x2="262.662" y2="102.793"/>
                        <line fill="none" x1="238.271" y1="72.051" x2="244.641" y2="67.426"/>
                        <line fill="none" x1="211.941" y1="45.727" x2="216.572" y2="39.358"/>
                        <line fill="none" x1="178.771" y1="28.824" x2="181.204" y2="21.336"/>
                        <path fill="none" stroke="#25B7C8" stroke-width="2" stroke-miterlimit="10" d="M273.249,142
                          c0,72.492-58.761,131.25-131.25,131.25c-72.488,0-131.25-58.758-131.25-131.25"/>
                        <path fill="none" stroke="#25B7C8" stroke-width="2" stroke-miterlimit="10" d="M273.249,142
                          c0-72.492-58.761-131.25-131.25-131.25c-72.488,0-131.25,58.758-131.25,131.25"/>
                        <g>
                          <g>
                            <circle fill="#25B7C8" cx="141.999" cy="280.25" r="1.751"/>
                          </g>
                          <g>
                            <circle fill="#25B7C8" cx="141.999" cy="3.75" r="1.751"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <circle fill="#25B7C8" cx="151.648" cy="279.914" r="1.751"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M130.602,4.208c0.068,0.965,0.904,1.692,1.871,1.626c0.963-0.067,1.693-0.904,1.624-1.871
                              c-0.066-0.961-0.906-1.689-1.87-1.622C131.262,2.408,130.535,3.245,130.602,4.208z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <circle fill="#25B7C8" cx="161.252" cy="278.905" r="1.751"/>
                          </g>
                          <g>
                            <circle fill="#25B7C8" cx="122.746" cy="5.095" r="1.752"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <circle fill="#25B7C8" cx="170.76" cy="277.229" r="1.751"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M111.525,7.134c0.199,0.946,1.129,1.549,2.076,1.35c0.947-0.202,1.553-1.131,1.347-2.075
                              c-0.2-0.946-1.128-1.551-2.075-1.351C111.926,5.261,111.322,6.19,111.525,7.134z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M178.445,275.376c-0.268-0.93,0.271-1.897,1.201-2.163c0.929-0.268,1.896,0.271,2.166,1.199
                              c0.265,0.929-0.271,1.898-1.199,2.166C179.684,276.842,178.712,276.307,178.445,275.376z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M102.185,9.588c0.267,0.929,1.237,1.467,2.166,1.199c0.931-0.266,1.469-1.233,1.199-2.163
                              c-0.264-0.93-1.233-1.466-2.163-1.202C102.458,7.69,101.918,8.659,102.185,9.588z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M187.667,272.511c-0.331-0.907,0.14-1.911,1.046-2.243c0.909-0.33,1.915,0.139,2.243,1.047
                              c0.332,0.906-0.138,1.912-1.044,2.242C189.003,273.886,187.999,273.421,187.667,272.511z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M93.039,12.685c0.333,0.909,1.335,1.378,2.246,1.048c0.907-0.332,1.375-1.335,1.044-2.244
                              c-0.328-0.91-1.335-1.375-2.243-1.047C93.179,10.773,92.709,11.779,93.039,12.685z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <circle fill="#25B7C8" cx="198.266" cy="268.298" r="1.751"/>
                          </g>
                          <g>
                            <circle fill="#25B7C8" cx="85.732" cy="15.702" r="1.752"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M205.398,264.891c-0.457-0.854-0.133-1.914,0.723-2.365c0.854-0.457,1.914-0.133,2.369,0.722
                              c0.453,0.853,0.127,1.914-0.723,2.368C206.911,266.064,205.854,265.742,205.398,264.891z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M75.508,20.754c0.455,0.854,1.517,1.177,2.366,0.722c0.856-0.451,1.18-1.511,0.726-2.365
                              c-0.451-0.852-1.514-1.176-2.367-0.725C75.38,18.84,75.055,19.902,75.508,20.754z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M213.82,260.17c-0.512-0.816-0.266-1.896,0.557-2.413c0.82-0.51,1.9-0.263,2.412,0.556
                              c0.516,0.82,0.266,1.9-0.555,2.414C215.413,261.239,214.334,260.99,213.82,260.17z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M67.207,25.687c0.515,0.819,1.594,1.066,2.414,0.556c0.82-0.515,1.069-1.595,0.555-2.413
                              c-0.508-0.82-1.59-1.069-2.411-0.557C66.944,23.785,66.695,24.866,67.207,25.687z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M221.893,254.875c-0.565-0.783-0.393-1.877,0.391-2.443c0.781-0.57,1.876-0.394,2.443,0.387
                              c0.566,0.781,0.396,1.875-0.388,2.447C223.557,255.83,222.462,255.658,221.893,254.875z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M59.27,31.183c0.57,0.779,1.666,0.956,2.447,0.386c0.781-0.566,0.957-1.661,0.387-2.443
                              c-0.565-0.783-1.662-0.955-2.446-0.39C58.875,29.307,58.704,30.4,59.27,31.183z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M229.575,249.03c-0.617-0.738-0.521-1.847,0.22-2.464c0.738-0.623,1.846-0.526,2.465,0.215
                              c0.625,0.74,0.526,1.843-0.216,2.465C231.305,249.867,230.199,249.77,229.575,249.03z"/>
                          </g>
                          <g>
                            <circle fill="#25B7C8" cx="53.078" cy="36.094" r="1.751"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M236.836,242.664c-0.674-0.695-0.652-1.803,0.043-2.475s1.807-0.65,2.477,0.045
                              c0.672,0.693,0.651,1.803-0.041,2.474C238.616,243.379,237.508,243.359,236.836,242.664z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M44.644,43.767c0.672,0.695,1.78,0.716,2.478,0.044c0.695-0.672,0.711-1.78,0.041-2.475
                              c-0.67-0.696-1.778-0.716-2.477-0.043C43.989,41.964,43.973,43.073,44.644,43.767z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M243.63,235.811c-0.717-0.648-0.776-1.754-0.128-2.476c0.643-0.717,1.751-0.776,2.473-0.127
                              c0.719,0.647,0.774,1.754,0.127,2.47C245.457,236.396,244.35,236.453,243.63,235.811z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M38.023,50.792c0.719,0.648,1.825,0.589,2.475-0.127c0.645-0.72,0.589-1.826-0.131-2.475
                              c-0.718-0.643-1.824-0.588-2.474,0.132C37.246,49.038,37.305,50.146,38.023,50.792z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M249.932,228.495c-0.763-0.597-0.897-1.695-0.302-2.458c0.595-0.762,1.695-0.895,2.456-0.303
                              c0.764,0.598,0.896,1.695,0.303,2.459C251.792,228.954,250.691,229.089,249.932,228.495z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M31.908,58.264c0.767,0.594,1.865,0.46,2.462-0.301c0.594-0.763,0.458-1.861-0.302-2.458
                              c-0.765-0.594-1.861-0.459-2.461,0.301C31.016,56.57,31.148,57.668,31.908,58.264z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M255.705,220.758c-0.803-0.539-1.014-1.628-0.473-2.428s1.629-1.014,2.429-0.473
                              c0.806,0.541,1.016,1.627,0.476,2.43C257.593,221.088,256.506,221.3,255.705,220.758z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M26.334,66.142c0.8,0.542,1.892,0.328,2.431-0.472c0.544-0.8,0.329-1.889-0.471-2.428
                              c-0.804-0.543-1.892-0.33-2.433,0.47C25.32,64.515,25.533,65.602,26.334,66.142z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M260.925,212.641c-0.837-0.483-1.124-1.553-0.639-2.391c0.479-0.838,1.553-1.125,2.39-0.641
                              c0.84,0.483,1.126,1.553,0.643,2.391C262.832,212.838,261.764,213.125,260.925,212.641z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M21.32,74.39c0.838,0.484,1.911,0.198,2.393-0.64s0.196-1.907-0.642-2.39
                              c-0.835-0.484-1.905-0.198-2.392,0.64C20.198,72.838,20.485,73.907,21.32,74.39z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <circle fill="#25B7C8" cx="266.334" cy="202.604" r="1.75"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M16.897,82.969c0.865,0.424,1.917,0.063,2.341-0.805c0.424-0.871,0.062-1.917-0.806-2.341
                              c-0.871-0.424-1.919-0.064-2.34,0.805C15.668,81.495,16.025,82.545,16.897,82.969z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M269.604,195.41c-0.896-0.359-1.326-1.383-0.967-2.276c0.363-0.896,1.383-1.329,2.28-0.965
                              c0.896,0.358,1.326,1.381,0.969,2.276C271.521,195.341,270.503,195.775,269.604,195.41z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M13.082,91.831c0.895,0.365,1.916-0.068,2.278-0.965c0.363-0.895-0.073-1.917-0.967-2.276
                              c-0.899-0.365-1.919,0.069-2.28,0.965C11.75,90.45,12.182,91.472,13.082,91.831z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M273.023,186.386c-0.92-0.3-1.424-1.284-1.125-2.204c0.297-0.92,1.287-1.422,2.207-1.123
                              c0.918,0.297,1.422,1.287,1.121,2.207C274.93,186.182,273.939,186.688,273.023,186.386z"/>
                          </g>
                          <g>
                            <circle fill="#25B7C8" cx="10.436" cy="99.278" r="1.75"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M275.801,177.145c-0.938-0.232-1.506-1.185-1.273-2.119c0.233-0.94,1.185-1.512,2.123-1.276
                              c0.938,0.233,1.508,1.181,1.271,2.121C277.689,176.807,276.741,177.376,275.801,177.145z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M7.351,110.251c0.936,0.235,1.888-0.335,2.122-1.276c0.232-0.936-0.339-1.887-1.276-2.119
                              c-0.94-0.232-1.888,0.337-2.123,1.274C5.839,109.07,6.408,110.018,7.351,110.251z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M277.929,167.73c-0.95-0.168-1.589-1.074-1.42-2.029c0.168-0.949,1.079-1.587,2.028-1.418
                              c0.951,0.169,1.587,1.076,1.421,2.027C279.789,167.262,278.879,167.898,277.929,167.73z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M5.463,119.717c0.95,0.168,1.86-0.47,2.026-1.418c0.167-0.955-0.468-1.861-1.421-2.029
                              c-0.95-0.168-1.862,0.469-2.025,1.42C3.873,118.642,4.507,119.548,5.463,119.717z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M279.395,158.191c-0.963-0.103-1.66-0.963-1.557-1.926c0.098-0.957,0.959-1.654,1.922-1.558
                              c0.963,0.104,1.66,0.964,1.559,1.927C281.218,157.594,280.357,158.291,279.395,158.191z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M4.238,129.291c0.962,0.098,1.824-0.6,1.924-1.558c0.101-0.961-0.598-1.823-1.56-1.925
                              c-0.96-0.1-1.82,0.599-1.924,1.556C2.578,128.327,3.275,129.187,4.238,129.291z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M280.189,148.573c-0.969-0.031-1.724-0.843-1.69-1.808c0.036-0.969,0.846-1.724,1.813-1.688
                              c0.963,0.034,1.723,0.844,1.686,1.812C281.969,147.852,281.155,148.607,280.189,148.573z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M3.686,138.924c0.969,0.034,1.779-0.721,1.811-1.688c0.037-0.965-0.72-1.777-1.688-1.808
                              c-0.966-0.035-1.778,0.721-1.808,1.685C1.962,138.08,2.72,138.89,3.686,138.924z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M280.313,138.924c-0.968,0.034-1.776-0.721-1.813-1.688c-0.032-0.965,0.723-1.777,1.689-1.808
                              c0.967-0.035,1.779,0.721,1.81,1.685C282.035,138.08,281.275,138.89,280.313,138.924z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M3.809,148.573c0.968-0.031,1.725-0.843,1.688-1.808c-0.031-0.969-0.842-1.724-1.811-1.688
                              c-0.966,0.034-1.724,0.844-1.685,1.812C2.03,147.852,2.843,148.607,3.809,148.573z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M279.76,129.291c-0.963,0.098-1.824-0.6-1.922-1.558c-0.104-0.961,0.594-1.823,1.557-1.925
                              c0.963-0.1,1.823,0.599,1.924,1.556C281.42,128.327,280.723,129.187,279.76,129.291z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M4.603,158.191c0.962-0.103,1.66-0.963,1.56-1.926c-0.1-0.957-0.962-1.654-1.924-1.558
                              c-0.963,0.104-1.66,0.964-1.56,1.927C2.782,157.594,3.643,158.291,4.603,158.191z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M278.537,119.717c-0.949,0.168-1.86-0.47-2.028-1.418c-0.169-0.955,0.47-1.861,1.42-2.029
                              s1.86,0.469,2.029,1.42C280.124,118.642,279.488,119.548,278.537,119.717z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M6.068,167.73c0.953-0.168,1.588-1.074,1.421-2.029c-0.166-0.949-1.076-1.587-2.026-1.418
                              c-0.956,0.169-1.59,1.076-1.42,2.027C4.206,167.262,5.118,167.898,6.068,167.73z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M276.648,110.251c-0.938,0.235-1.889-0.335-2.121-1.276c-0.232-0.936,0.334-1.887,1.272-2.119
                              c0.94-0.232,1.89,0.337,2.121,1.274C278.157,109.07,277.588,110.018,276.648,110.251z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M8.196,177.145c0.938-0.232,1.509-1.185,1.276-2.119c-0.234-0.94-1.187-1.512-2.122-1.276
                              c-0.942,0.233-1.512,1.181-1.277,2.121C6.309,176.807,7.256,177.376,8.196,177.145z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M274.105,100.942c-0.92,0.298-1.909-0.204-2.207-1.124c-0.299-0.919,0.205-1.904,1.125-2.204
                              c0.916-0.301,1.906,0.205,2.203,1.121C275.527,99.656,275.023,100.645,274.105,100.942z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M10.976,186.386c0.919-0.3,1.424-1.284,1.124-2.204c-0.301-0.92-1.286-1.422-2.205-1.123
                              c-0.922,0.297-1.424,1.287-1.127,2.207C9.067,186.182,10.057,186.688,10.976,186.386z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M270.918,91.831c-0.898,0.365-1.917-0.068-2.279-0.965c-0.361-0.895,0.069-1.917,0.967-2.276
                              c0.897-0.365,1.918,0.069,2.281,0.965C272.244,90.45,271.813,91.472,270.918,91.831z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M14.394,195.41c0.894-0.359,1.33-1.383,0.967-2.276c-0.362-0.896-1.384-1.329-2.278-0.965
                              c-0.9,0.358-1.332,1.381-0.969,2.276C12.475,195.341,13.494,195.775,14.394,195.41z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <circle fill="#25B7C8" cx="266.334" cy="81.396" r="1.75"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M18.433,204.177c0.867-0.424,1.229-1.47,0.806-2.341c-0.424-0.867-1.476-1.229-2.341-0.805
                              c-0.872,0.424-1.229,1.474-0.805,2.341C16.514,204.241,17.562,204.602,18.433,204.177z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <circle fill="#25B7C8" cx="261.801" cy="72.875" r="1.75"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M23.071,212.641c0.838-0.483,1.124-1.553,0.642-2.391c-0.481-0.838-1.555-1.125-2.393-0.641
                              c-0.835,0.483-1.122,1.553-0.641,2.391C21.166,212.838,22.236,213.125,23.071,212.641z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M257.661,66.142c-0.8,0.542-1.888,0.328-2.429-0.472s-0.33-1.889,0.473-2.428
                              c0.801-0.543,1.888-0.33,2.432,0.47C258.677,64.515,258.467,65.602,257.661,66.142z"/>
                          </g>
                          <g>
                            <circle fill="#25B7C8" cx="27.314" cy="219.309" r="1.75"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M252.086,58.264c-0.761,0.594-1.861,0.46-2.456-0.301c-0.597-0.763-0.461-1.861,0.302-2.458
                              c0.762-0.594,1.86-0.459,2.457,0.301C252.982,56.57,252.85,57.668,252.086,58.264z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M34.068,228.495c0.76-0.597,0.896-1.695,0.302-2.458c-0.597-0.762-1.695-0.895-2.462-0.303
                              c-0.76,0.598-0.893,1.695-0.301,2.459C32.207,228.954,33.304,229.089,34.068,228.495z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M245.975,50.792c-0.722,0.648-1.83,0.589-2.473-0.127c-0.648-0.72-0.589-1.826,0.128-2.475
                              c0.72-0.643,1.827-0.588,2.472,0.132C246.749,49.038,246.693,50.146,245.975,50.792z"/>
                          </g>
                          <g>
                            <circle fill="#25B7C8" cx="39.195" cy="234.509" r="1.751"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M239.296,43.767c-0.671,0.695-1.78,0.716-2.476,0.044s-0.717-1.78-0.043-2.475
                              c0.672-0.696,1.779-0.716,2.477-0.043C239.945,41.964,239.967,43.073,239.296,43.767z"/>
                          </g>
                          <g>
                            <circle fill="#25B7C8" cx="45.963" cy="241.448" r="1.749"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M232.204,37.219c-0.619,0.742-1.726,0.838-2.464,0.215c-0.74-0.619-0.836-1.726-0.219-2.464
                              c0.623-0.739,1.728-0.837,2.467-0.218C232.73,35.375,232.828,36.478,232.204,37.219z"/>
                          </g>
                          <g>
                            <circle fill="#25B7C8" cx="53.133" cy="247.906" r="1.75"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M224.727,31.183c-0.567,0.779-1.662,0.956-2.443,0.386c-0.782-0.566-0.956-1.661-0.391-2.443
                              c0.569-0.783,1.664-0.955,2.446-0.39C225.121,29.307,225.293,30.4,224.727,31.183z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M62.104,254.875c0.57-0.783,0.395-1.877-0.387-2.443c-0.781-0.57-1.877-0.394-2.447,0.387
                              c-0.565,0.781-0.395,1.875,0.388,2.447C60.441,255.83,61.538,255.658,62.104,254.875z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <circle fill="#25B7C8" cx="215.305" cy="24.758" r="1.751"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M70.176,260.17c0.515-0.816,0.266-1.896-0.555-2.413c-0.82-0.51-1.899-0.263-2.414,0.556
                              c-0.512,0.82-0.264,1.9,0.558,2.414C68.587,261.239,69.668,260.99,70.176,260.17z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M208.49,20.754c-0.455,0.854-1.516,1.177-2.369,0.722c-0.855-0.451-1.18-1.511-0.723-2.365
                              c0.453-0.852,1.513-1.176,2.369-0.725C208.617,18.84,208.943,19.902,208.49,20.754z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M78.6,264.891c0.454-0.854,0.131-1.914-0.726-2.365c-0.85-0.457-1.911-0.133-2.366,0.722
                              c-0.453,0.853-0.128,1.914,0.725,2.368C77.086,266.064,78.148,265.742,78.6,264.891z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <circle fill="#25B7C8" cx="198.266" cy="15.702" r="1.751"/>
                          </g>
                          <g>
                            <circle fill="#25B7C8" cx="85.732" cy="268.298" r="1.751"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <circle fill="#25B7C8" cx="189.313" cy="12.087" r="1.75"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M96.329,272.511c0.331-0.907-0.137-1.911-1.044-2.243c-0.911-0.33-1.913,0.139-2.246,1.047
                              c-0.33,0.906,0.14,1.912,1.047,2.242C94.994,273.886,96.001,273.421,96.329,272.511z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M181.813,9.588c-0.27,0.929-1.237,1.467-2.166,1.199c-0.931-0.266-1.469-1.233-1.201-2.163
                              c0.267-0.93,1.238-1.466,2.168-1.202C181.542,7.69,182.077,8.659,181.813,9.588z"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M105.55,275.376c0.27-0.93-0.269-1.897-1.199-2.163c-0.929-0.268-1.899,0.271-2.166,1.199
                              s0.273,1.898,1.202,2.166C104.316,276.842,105.286,276.307,105.55,275.376z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <circle fill="#25B7C8" cx="170.76" cy="6.771" r="1.751"/>
                          </g>
                          <g>
                            <path fill="#25B7C8" d="M114.948,277.591c0.206-0.942-0.399-1.873-1.347-2.075c-0.947-0.199-1.877,0.404-2.076,1.351
                              c-0.203,0.942,0.4,1.873,1.348,2.075C113.82,279.143,114.748,278.537,114.948,277.591z"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <circle fill="#25B7C8" cx="161.252" cy="5.095" r="1.75"/>
                          </g>
                          <g>
                            <circle fill="#25B7C8" cx="122.746" cy="278.905" r="1.753"/>
                          </g>
                        </g>
                        <g>
                          <g>
                            <path fill="#25B7C8" d="M153.395,4.208c-0.066,0.965-0.903,1.692-1.867,1.626c-0.967-0.067-1.693-0.904-1.625-1.871
                              c0.067-0.961,0.902-1.689,1.869-1.622C152.732,2.408,153.463,3.245,153.395,4.208z"/>
                          </g>
                          <g>
                            <circle fill="#25B7C8" cx="132.35" cy="279.914" r="1.751"/>
                          </g>
                        </g>

                          <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-516.041" y1="427.4121" x2="-470.1152" y2="427.4121" gradientTransform="matrix(1 0 0 -1 539.04 527.3398)">
                          <stop  offset="0" style="stop-color:#F43B42"/>
                          <stop  offset="1" style="stop-color:#F8CA00"/>
                        </linearGradient>
                        <path fill="url(#SVGID_1_)" d="M22.999,142h15.659c0-28.539,11.566-54.373,30.267-73.073L57.854,57.855
                          C36.32,79.39,22.999,109.14,22.999,142z"/>

                          <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-433.8159" y1="444.8398" x2="-278.04" y2="444.8398" gradientTransform="matrix(1 0 0 -1 539.04 527.3398)">
                          <stop  offset="0" style="stop-color:#75CC4E"/>
                          <stop  offset="1" style="stop-color:#069267"/>
                        </linearGradient>
                        <path fill="url(#SVGID_2_)" d="M141.999,23c-12.839,0-25.189,2.058-36.775,5.817l4.839,14.893
                          c10.061-3.265,20.789-5.052,31.937-5.052c57.075,0,103.341,46.269,103.341,103.342H261C260.999,76.277,207.72,23,141.999,23z"/>

                          <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-481.186" y1="478.4688" x2="-428.9771" y2="478.4688" gradientTransform="matrix(1 0 0 -1 539.04 527.3398)">
                          <stop  offset="0" style="stop-color:#F8CA00"/>
                          <stop  offset="1" style="stop-color:#75CC4E"/>
                        </linearGradient>
                        <path fill="url(#SVGID_3_)" d="M57.854,57.855l11.071,11.072c11.396-11.396,25.45-20.122,41.138-25.217l-4.839-14.893
                          C87.156,34.686,70.974,44.731,57.854,57.855z"/>
                        <g>
                          <path fill="#F0F2F7" d="M245.249,142c0-57.025-46.224-103.25-103.25-103.25c-57.017,0-103.25,46.225-103.25,103.25H245.249z"/>
                        </g>
                      </g>
                      <g>
                        <text transform="matrix(1 0 0 1 122.874 236.499)" fill="#71B252" font-family="'MicrosoftYaHei-Bold'" font-size="20">良好</text>
                      </g>
                      <text transform="matrix(1 0 0 1 117.8242 203.249)" fill="#71B252" font-family="'MicrosoftYaHei-Bold'" font-size="39.2">78</text>
                      <g>
                        <g>
                          <text transform="matrix(1 0 0 1 40.499 140.6865)" fill="#999999" font-family="'MicrosoftYaHei'" font-size="10.5">0</text>
                        </g>
                        <g>
                          <text transform="matrix(1 0 0 1 209.373 91.249)" fill="#999999" font-family="'MicrosoftYaHei'" font-size="10.5">80</text>
                        </g>
                        <g>
                          <text transform="matrix(1 0 0 1 223.373 115.3115)" fill="#999999" font-family="'MicrosoftYaHei'" font-size="10.5">90</text>
                        </g>
                        <g>
                          <text transform="matrix(1 0 0 1 190.999 71.125)" fill="#999999" font-family="'MicrosoftYaHei'" font-size="10.5">70</text>
                        </g>
                        <g>
                          <text transform="matrix(1 0 0 1 164.749 57.125)" fill="#999999" font-family="'MicrosoftYaHei'" font-size="10.5">60</text>
                        </g>
                        <g>
                          <text transform="matrix(1 0 0 1 134.999 50.125)" fill="#999999" font-family="'MicrosoftYaHei'" font-size="10.5">50</text>
                        </g>
                        <g>
                          <text transform="matrix(1 0 0 1 46.624 115.3115)" fill="#999999" font-family="'MicrosoftYaHei'" font-size="10.5">10</text>
                        </g>
                        <g>
                          <text transform="matrix(1 0 0 1 58.874 91.249)" fill="#999999" font-family="'MicrosoftYaHei'" font-size="10.5">20</text>
                        </g>
                        <g>
                          <text transform="matrix(1 0 0 1 79.874 71.125)" fill="#999999" font-family="'MicrosoftYaHei'" font-size="10.5">30</text>
                        </g>
                        <g>
                          <text transform="matrix(1 0 0 1 106.999 57.125)" fill="#999999" font-family="'MicrosoftYaHei'" font-size="10.5">40</text>
                        </g>
                        <g>
                          <text transform="matrix(1 0 0 1 222.9258 140.6865)" fill="#999999" font-family="'MicrosoftYaHei'" font-size="10.5">100</text>
                        </g>
                      </g>
                      <g>
                        <g>
                          <g>
                            <polygon fill="#69727E" points="129.323,152.955 143.165,148.872 205.926,86.365 135.295,139.816 					"/>
                          </g>
                        </g>
                        <g>
                          <path fill="#69727E" d="M147.83,148.792c-3.753,3.263-9.437,2.865-12.697-0.888c-3.263-3.75-2.864-9.435,0.887-12.696
                            c3.752-3.264,9.439-2.865,12.698,0.887C151.98,139.846,151.581,145.531,147.83,148.792z"/>
                        </g>
                        <g>
                          <path fill="#F0F2F7" d="M145.206,145.771c-2.084,1.813-5.242,1.594-7.052-0.489c-1.81-2.089-1.59-5.248,0.49-7.058
                            c2.087-1.812,5.245-1.586,7.057,0.498C147.512,140.805,147.29,143.958,145.206,145.771z"/>
                        </g>
                      </g>
                    </g>
                  </g>
                </svg>
              </figure>
            </aside>
          </div>
        </div>
        <div class="leftChild leftBottom">
          <div class="dataView">
            <div class="viewTitle">信息统计</div>
            <div id="myChart" :style="{width: '100%', height: '300px'}"></div>
          </div>
        </div>
        <div></div>
      </div></el-col>
      <el-col :span="8" class="centerCol">
        <div class="dataContent contentBorder">
          <div class="dataView">
            <div class="viewTitle">数据概览</div>
            <div class="datasValue" v-for='item in items'>
              <div class="datasValueName">{{item.name}}</div>
              <div class="datasValueValue">{{item.value}}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="rightCol">
        <div class="dataContent contentBorder">
          <div class="dataView">
            <div class="viewTitle">运行次数统计</div>
            <div class="datasUseValue" v-for='item in useItems'>
              <div class="datasUseValueName">{{item.name}}</div>
              <div class="datasUseValueValue">{{item.value}}</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  const echarts = require('echarts/lib/echarts')
  // 引入饼图组件
  require('echarts/lib/chart/pie')
  // 引入提示框和图例组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/legend')

  export default {
    name: 'todayData',
    data() {
      return {
        items: [
          { name: '耗电量(kw)', value: '10086' },
          { name: '垃圾处理量(ton)', value: '10010' },
          { name: '总起重量(ton)', value: '12345' },
          { name: '耗电量(kw)', value: '10086' },
          { name: '垃圾处理量(ton)', value: '10010' },
          { name: '总起重量(ton)', value: '12345' },
          { name: '耗电量(kw)', value: '10086' },
          { name: '垃圾处理量(ton)', value: '10010' },
          { name: '总起重量(ton)', value: '12345' },
          { name: '耗电量(kw)', value: '10086' }
        ],
        useItems: [
          { name: '上升次数', value: '123' },
          { name: '下降次数', value: '321' },
          { name: '超载次数', value: '1234567' }
        ]
      }
    },
    mounted() {
      this.drawLine()
    },
    methods: {
      returnIndex() {
        this.$router.push({ path: '/monitor/homepage/grab' })
      },
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            x: 'center',
            y: 'bottom',
            data: ['事件', '故障', '告警']
          },
          series: [
            {
              color: ['#F43B42', '#45B358', '#FC8358'],
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '70%'],
              label: {
                normal: {
                  formatter: ' {b|{b}，}{c}  ',
                  rich: {
                    b: {
                      fontSize: 16,
                      lineHeight: 33
                    },
                    c: {
                      fontSize: 16,
                      lineHeight: 33
                    }
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: [
                { value: 40, name: '事件' },
                { value: 30, name: '故障' },
                { value: 80, name: '告警' }
              ]
            }
          ]
        })
      }
    }
  }

</script>
<style scoped>
  .today-containner{
    width: 100%;
    min-height: 500px;
    font-size: 16px;
    color: #25B6C7;
  }
  /deep/ .outMore{
    height: 40px;
    padding-top: 2px;
    margin: 20px;
    border-bottom: 1px solid #E1E1E1;
  }
  /deep/ .dataTitle {
    padding-left: 5px;
    border-left: 5px solid #25B6C7;
    height: 16px;
    font-size: 16px;
    color: #323842;
  }
  /deep/ .titleRight {
    float: right;
    font-size: 14px;
    color: #25B6C7;
    cursor: pointer;
  }
  /deep/ .titleIcon {
    font-weight: bold;
  }
  .el-row {
    margin: 0px 20px;
  }
  .leftCol {
    padding-right: 10px;
  }
  .centerCol {
    padding: 0px 10px;
  }
  .rightCol {
    padding-left: 10px;
  }
  .dataContent {
    height: 840px;
  }
  .contentBorder {
    border: 1px solid #E1E1E1;
    padding: 20px;
  }
  .leftTop {
    margin-bottom: 20px;
    height: 400px;
  }
  .leftBottom {
    height: 420px;
  }
  .leftChild {
    width: 100%;
    border: 1px solid #E1E1E1;
    padding: 20px;
  }
  .dataView {
    width: 100%;
    height: 100%;
  }
  .viewTitle {
    color: #323842;
    font-size: 14px;
    height: 14px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  .datasValue {
    height: 68px;
    margin-bottom: 10px;
    background: #F0F2F7;
  }
  .datasValueName {
    float: left;
    font-size: 14px;
    color: #69727E;
    margin-top: 25px;
    margin-left: 22px;
  }
  .datasValueValue {
    float: right;
    font-size: 24px;
    font-weight: bolder;
    margin-top: 22px;
    margin-right: 22px;
  }
  .datasUseValue {
    height: 68px;
    margin-bottom: 10px;
    background: #F0F2F7;
  }
  .datasUseValueName {
    float: left;
    font-size: 14px;
    color: #69727E;
    margin-top: 25px;
    margin-left: 22px;
  }
  .datasUseValueValue {
    float: right;
    font-size: 24px;
    font-weight: bolder;
    margin-top: 22px;
    margin-right: 22px;
  }
</style>
